<template>
  <div class="SetInspectionTypeRelation">
    <div class="filter">
      <el-form ref="form" label-width="120px">
        <el-form-item label="巡检类型:">
          <el-radio-group v-model="filterForm.inspectionType" @change="handleInspectionTypeChange">
            <el-radio
              v-for="item in inspectionTypeList"
              :key="item.id"
              :label="item.id"
            >{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label v-if="specialInspectionTypeList">
          <el-radio-group
            v-model="filterForm.specialInspectionType"
            @change="handleSpecialInspectionTypeChange"
          >
            <el-radio
              v-for="item in specialInspectionTypeList"
              :key="item.id"
              :label="item.id"
            >{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="特巡模式:" v-if="specialInspectionModeList">
          <el-radio-group
            v-model="filterForm.specialInspectionMode"
            @change="handleSpecialInspectionModeChange"
          >
            <el-radio
              v-for="item in specialInspectionModeList"
              :key="item.id"
              :label="item.id"
            >{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设备区域:">
          <div class="el_consist">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              v-model="d_a_CheckAll"
              @change="handle_d_a_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group v-model="filterForm.deviceAreasCheckList">
              <el-checkbox
                v-for="item in deviceAreasList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="设备类型:">
          <div class="el_consist">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              v-model="d_t_CheckAll"
              @change="handle_d_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group v-model="filterForm.deviceTypeCheckList">
              <el-checkbox
                v-for="item in deviceTypeList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.displayName}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="识别类型:">
          <div class="el_consist">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              v-model="r_t_CheckAll"
              @change="handle_r_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group v-model="filterForm.recognitionTypeCheckList">
              <el-checkbox
                v-for="item in recognitionTypeList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="表计类型:">
          <div class="el_consist">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              v-model="m_t_CheckAll"
              @change="handle_m_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group v-model="filterForm.meterTypeCheckList">
              <el-checkbox
                v-for="item in meterTypeList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="设备外观类型:">
          <div class="el_consist">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              v-model="d_a_t_CheckAll"
              @change="handle_d_a_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group v-model="filterForm.deviceAppearanceTypeCheckList">
              <el-checkbox
                v-for="item in deviceAppearanceTypeList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="el_consist">
            <el-button
              class="save_button"
              type="primary"
              size="medium"
              @click="uploadInspectTypeChoosesDefaultChecks"
            >
              <i></i>保 存
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  inspectTypesTree,
  devicesAreas,
  devicesTypesList,
  reconTypesList,
  meterTypesList,
  faceTypesList,
  updateInspectTypeChooses,
  inspectTypeChoosesDefaultChecks
} from "@/api/apiManagement";

export default {
  data() {
    return {
      inspectTypesTree: [],
      deviceAreasList: [],
      deviceTypeList: [],
      recognitionTypeList: [],
      meterTypeList: [],
      deviceAppearanceTypeList: [],

      d_a_isIndeterminate: false,
      d_a_CheckAll: false,
      d_t_isIndeterminate: false,
      d_t_CheckAll: false,
      r_t_isIndeterminate: false,
      r_t_CheckAll: false,
      m_t_isIndeterminate: false,
      m_t_CheckAll: false,
      d_a_t_isIndeterminate: false,
      d_a_t_CheckAll: false,

      //
      filterForm: {
        inspectionType: 1,
        specialInspectionType: null,
        specialInspectionMode: null,
        deviceAreasCheckList: [],
        deviceTypeCheckList: [],
        recognitionTypeCheckList: [],
        meterTypeCheckList: [],
        deviceAppearanceTypeCheckList: []
      }
    };
  },
  watch: {
    "filterForm.deviceAreasCheckList": function(val, oldVal) {
      let checkedCount = val.length;
      this.d_a_CheckAll = checkedCount === this.deviceAreasList.length;
      this.d_a_isIndeterminate =
        checkedCount > 0 && checkedCount < this.deviceAreasList.length;
    },
    "filterForm.deviceTypeCheckList": function(val, oldVal) {
      let checkedCount = val.length;
      this.d_t_CheckAll = checkedCount === this.deviceTypeList.length;
      this.d_t_isIndeterminate =
        checkedCount > 0 && checkedCount < this.deviceTypeList.length;
    },
    "filterForm.recognitionTypeCheckList": function(val, oldVal) {
      let checkedCount = val.length;
      this.r_t_CheckAll = checkedCount === this.recognitionTypeList.length;
      this.r_t_isIndeterminate =
        checkedCount > 0 && checkedCount < this.recognitionTypeList.length;
    },
    "filterForm.meterTypeCheckList": function(val, oldVal) {
      let checkedCount = val.length;
      this.m_t_CheckAll = checkedCount === this.meterTypeList.length;
      this.m_t_isIndeterminate =
        checkedCount > 0 && checkedCount < this.meterTypeList.length;
    },
    "filterForm.deviceAppearanceTypeCheckList": function(val, oldVal) {
      let checkedCount = val.length;
      this.d_a_t_CheckAll =
        checkedCount === this.deviceAppearanceTypeList.length;
      this.d_a_t_isIndeterminate =
        checkedCount > 0 && checkedCount < this.deviceAppearanceTypeList.length;
    }
  },
  computed: {
    inspectionTypeList: function() {
      if (this.inspectTypesTree) {
        return this.inspectTypesTree;
      }
    },
    specialInspectionTypeList: function() {
      if (this.inspectionTypeList) {
        for (var i = 0, len = this.inspectionTypeList.length; i < len; i++) {
          if (
            this.inspectionTypeList[i].id === this.filterForm.inspectionType
          ) {
            return this.inspectionTypeList[i].children;
          }
        }
      }
    },
    specialInspectionModeList: function() {
      if (this.specialInspectionTypeList) {
        for (
          var i = 0, len = this.specialInspectionTypeList.length;
          i < len;
          i++
        ) {
          if (
            this.specialInspectionTypeList[i].id ===
            this.filterForm.specialInspectionType
          ) {
            return this.specialInspectionTypeList[i].children;
          }
        }
      }
    }
  },
  created() {
    // 巡检类型树
    this.getInspectTypesTree();
    // 设备区域
    this.getDevicesAreas();
    // 设备类型
    this.getDevicesTypesList();
    // 识别类型
    this.getReconTypesList();
    // 表计类型
    this.getMeterTypesList();
    // 设备外观类型
    this.getFaceTypeList();
    // 巡检类型默认配置
    this.getInspectTypeChoosesDefaultChecks();
  },
  methods: {
    // 巡检类型树
    getInspectTypesTree() {
      inspectTypesTree()
        .then(response => {
          if (response) {
            this.inspectTypesTree = response;
          }
        })
        .catch(() => {});
    },
    // 设备区域
    getDevicesAreas() {
      devicesAreas()
        .then(response => {
          if (response) {
            this.deviceAreasList = response;
          }
        })
        .catch(() => {});
    },
    // 设备类型
    getDevicesTypesList() {
      devicesTypesList()
        .then(response => {
          if (response.list) {
            this.deviceTypeList = response.list.filter(item => {
              return parseInt(item.name) >= 2000;
            });
          }
        })
        .catch(() => {});
    },
    // 识别类型
    getReconTypesList() {
      reconTypesList()
        .then(response => {
          if (response.list) {
            this.recognitionTypeList = response.list;
          }
        })
        .catch(() => {});
    },
    // 表计类型
    getMeterTypesList() {
      meterTypesList()
        .then(response => {
          if (response.list) {
            this.meterTypeList = response.list;
          }
        })
        .catch(() => {});
    },
    // 设备外观类型
    getFaceTypeList() {
      faceTypesList()
        .then(response => {
          if (response.list) {
            this.deviceAppearanceTypeList = response.list;
          }
        })
        .catch(() => {});
    },
    // 巡检类型默认配置
    getInspectTypeChoosesDefaultChecks() {
      var tempInspectId = this.filterForm.inspectionType;
      if (this.filterForm.inspectionType === 3) {
        tempInspectId = this.filterForm.specialInspectionType;
      }
      if (this.filterForm.inspectionType === 4) {
        if (this.filterForm.specialInspectionType === 11) {
          tempInspectId = this.filterForm.specialInspectionMode;
        } else {
          tempInspectId = this.filterForm.specialInspectionType;
        }
      }
      inspectTypeChoosesDefaultChecks({
        // inspectId: this.filterForm.inspectionType
        inspectId: tempInspectId
      }).then(response => {
        if (response) {
          for (var i = 0, len = response.length; i < len; i++) {
            // if (response[i].inspectTypeId === this.filterForm.inspectionType) {
            if (response[i].inspectTypeId === tempInspectId) {
              if (response[i].chooseType === 0) {
                if (
                  !this.filterForm.deviceAreasCheckList.some(
                    item => item === response[i].chooseId
                  )
                ) {
                  this.filterForm.deviceAreasCheckList.push(
                    response[i].chooseId
                  );
                }
              }
              if (response[i].chooseType === 1) {
                if (
                  !this.filterForm.deviceTypeCheckList.some(
                    item => item === response[i].chooseId
                  )
                ) {
                  this.filterForm.deviceTypeCheckList.push(
                    response[i].chooseId
                  );
                }
              }
              if (response[i].chooseType === 2) {
                if (
                  !this.filterForm.recognitionTypeCheckList.some(
                    item => item === response[i].chooseId
                  )
                ) {
                  this.filterForm.recognitionTypeCheckList.push(
                    response[i].chooseId
                  );
                }
              }
              if (response[i].chooseType === 3) {
                if (
                  !this.filterForm.meterTypeCheckList.some(
                    item => item === response[i].chooseId
                  )
                ) {
                  this.filterForm.meterTypeCheckList.push(response[i].chooseId);
                }
              }
              if (response[i].chooseType === 4) {
                if (
                  !this.filterForm.deviceAppearanceTypeCheckList.some(
                    item => item === response[i].chooseId
                  )
                ) {
                  this.filterForm.deviceAppearanceTypeCheckList.push(
                    response[i].chooseId
                  );
                }
              }
            }
          }
        }
      });
    },
    // 巡检类型默认配置
    uploadInspectTypeChoosesDefaultChecks() {
      var inspectTypeChooseRequests = [];
      if (
        this.filterForm.deviceAreasCheckList &&
        this.filterForm.deviceAreasCheckList.length > 0
      ) {
        for (
          var i = 0, len = this.filterForm.deviceAreasCheckList.length;
          i < len;
          i++
        ) {
          inspectTypeChooseRequests.push({
            chooseId: this.filterForm.deviceAreasCheckList[i],
            chooseType: "0"
          });
        }
      }
      if (
        this.filterForm.deviceTypeCheckList &&
        this.filterForm.deviceTypeCheckList.length > 0
      ) {
        for (
          var i = 0, len = this.filterForm.deviceTypeCheckList.length;
          i < len;
          i++
        ) {
          inspectTypeChooseRequests.push({
            chooseId: this.filterForm.deviceTypeCheckList[i],
            chooseType: "1"
          });
        }
      }
      if (
        this.filterForm.recognitionTypeCheckList &&
        this.filterForm.recognitionTypeCheckList.length > 0
      ) {
        for (
          var i = 0, len = this.filterForm.recognitionTypeCheckList.length;
          i < len;
          i++
        ) {
          inspectTypeChooseRequests.push({
            chooseId: this.filterForm.recognitionTypeCheckList[i],
            chooseType: "2"
          });
        }
      }
      if (
        this.filterForm.meterTypeCheckList &&
        this.filterForm.meterTypeCheckList.length > 0
      ) {
        for (
          var i = 0, len = this.filterForm.meterTypeCheckList.length;
          i < len;
          i++
        ) {
          inspectTypeChooseRequests.push({
            chooseId: this.filterForm.meterTypeCheckList[i],
            chooseType: "3"
          });
        }
      }
      if (
        this.filterForm.deviceAppearanceTypeCheckList &&
        this.filterForm.deviceAppearanceTypeCheckList.length > 0
      ) {
        for (
          var i = 0, len = this.filterForm.deviceAppearanceTypeCheckList.length;
          i < len;
          i++
        ) {
          inspectTypeChooseRequests.push({
            chooseId: this.filterForm.deviceAppearanceTypeCheckList[i],
            chooseType: "4"
          });
        }
      }
      var tempInspectId = this.filterForm.inspectionType;
      if (this.filterForm.inspectionType === 3) {
        tempInspectId = this.filterForm.specialInspectionType;
      }
      if (this.filterForm.inspectionType === 4) {
        if (this.filterForm.specialInspectionType === 11) {
          tempInspectId = this.filterForm.specialInspectionMode;
        } else {
          tempInspectId = this.filterForm.specialInspectionType;
        }
      }
      var parm = {
        inspectTypeChooseRequests: inspectTypeChooseRequests,
        inspectTypeId: tempInspectId
      };
      updateInspectTypeChooses(parm)
        .then(response => {
          this.$message({
            message: "修改成功",
            type: "success"
          });
        })
        .catch(() => {
          this.$message.error({
            message: "修改失败",
          });
        });
    },
    handleInspectionTypeChange(val) {
      if (val === 3) {
        this.filterForm.specialInspectionType = 5;
      }
      if (val === 4) {
        this.filterForm.specialInspectionType = 11;
        this.filterForm.specialInspectionMode = 13;
      }
      this.getTreeAndTask(val);
    },
    handleSpecialInspectionTypeChange(val) {
      this.getTreeAndTask(val);
    },
    handleSpecialInspectionModeChange(val) {
      this.getTreeAndTask(val);
    },
    getTreeAndTask(val) {
      this.filterForm.inspectTypeId = val;
      this.filterForm.deviceAreasCheckList = [];
      this.filterForm.deviceTypeCheckList = [];
      this.filterForm.recognitionTypeCheckList = [];
      this.filterForm.meterTypeCheckList = [];
      this.filterForm.deviceAppearanceTypeCheckList = [];

      this.getInspectTypeChoosesDefaultChecks();
    },
    //
    handle_d_a_CheckAllChange(val) {
      this.filterForm.deviceAreasCheckList = val
        ? this.deviceAreasList.map(item => {
            return item.id;
          })
        : [];
    },
    //
    handle_d_t_CheckAllChange(val) {
      this.filterForm.deviceTypeCheckList = val
        ? this.deviceTypeList.map(item => {
            return item.id;
          })
        : [];
    },
    //
    handle_r_t_CheckAllChange(val) {
      this.filterForm.recognitionTypeCheckList = val
        ? this.recognitionTypeList.map(item => {
            return item.id;
          })
        : [];
    },
    //
    handle_m_t_CheckAllChange(val) {
      this.filterForm.meterTypeCheckList = val
        ? this.meterTypeList.map(item => {
            return item.id;
          })
        : [];
    },
    //
    handle_d_a_t_CheckAllChange(val) {
      this.filterForm.deviceAppearanceTypeCheckList = val
        ? this.deviceAppearanceTypeList.map(item => {
            return item.id;
          })
        : [];
    }
  }
};
</script>

<style>
.SetInspectionTypeRelation {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
}
.SetInspectionTypeRelation .filter {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
}
.SetInspectionTypeRelation .filter .el-form {
  height: 100%;
  overflow-y: auto;
}
.SetInspectionTypeRelation .filter .el-form-item {
  margin-top: 0;
  margin-bottom: 3px;
}
.SetInspectionTypeRelation .filter .el-form-item__label {
  font-size: 13px;
  line-height: 26px;
}
.SetInspectionTypeRelation .filter .el-form-item__content {
  font-size: 13px;
  line-height: 26px;
}
.SetInspectionTypeRelation .filter .el-radio__label {
  font-size: 13px;
}
.SetInspectionTypeRelation .filter .el-checkbox {
  font-size: 13px;
}
.SetInspectionTypeRelation .filter .el-checkbox__label {
  font-size: 13px;
  padding-left: 6px;
}
.SetInspectionTypeRelation .filter .el-radio {
  width: 210px;
  margin-left: 10px;
}
.SetInspectionTypeRelation .filter .el-radio + .el-radio {
  margin-left: 10px;
}
.SetInspectionTypeRelation .filter .el-checkbox {
  width: 210px;
  margin-left: 10px;
}
.SetInspectionTypeRelation .filter .el-checkbox + .el-checkbox {
  margin-left: 10px;
}
.SetInspectionTypeRelation .content-left .custom-tree-node span {
  font-size: 13px;
}
.SetInspectionTypeRelation .el_consist {
  width: calc(100% - 220px);
  float: left;
  overflow: hidden;
}
.SetInspectionTypeRelation .save_button {
  margin-right: 200px;
  float: right;
}
.SetInspectionTypeRelation .allCheckBox {
  float: left;
}
.SetInspectionTypeRelation .moreCheckBox {
  float: right;
}
</style>